<template>
<div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="$t('plus.base_info')" name="1"></el-tab-pane>
        <el-tab-pane :label="$t('plus.applicable_products')" name="2"></el-tab-pane>
      </el-tabs>
      <template v-if="activeName == '1'">
        <div class="common-form">{{$t('plus.add_coupon')}}</div>
        <el-form-item
          :label="$t('plus.coupon_name1')"
          prop="name"
          :rules="[{  required: true,  message: ' '}]"
        >
          <el-input
            v-model="form.name"
            :placeholder="$t('plus.input_coupon_name')"
          ></el-input>
          <div class="tips">{{$t('plus.example_coupon')}}</div>
        </el-form-item>
        <el-form-item :label="$t('plus.coupon_color')">
          <el-radio-group v-model="form.color">
            <el-radio label="10">{{$t('plus.blue')}}</el-radio>
            <el-radio label="20">{{$t('plus.red')}}</el-radio>
            <el-radio label="30">{{$t('plus.purple')}}</el-radio>
            <el-radio label="40">{{$t('plus.yellow')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('plus.coupon_type')">
          <el-radio-group v-model="form.couponType">
            <el-radio label="10">{{$t('plus.coupon_full_reduction')}}</el-radio>
            <el-radio label="20">{{$t('plus.coupon_discount')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.couponType == 10">
          <el-form-item :label="$t('plus.discount_amount1')"
            ><el-input
              v-model="form.reducePrice"
              :placeholder="$t('plus.input_discount_amount')"
              type="number"
            ></el-input
          ></el-form-item>
        </div>
        <div v-else>
          <el-form-item
            :label="$t('plus.discount_rate1')"
            :label-width="formLabelWidth"
            props="discount"
            :rules="[{  required: true,  message: $t('plus.input_discount_rate')}]"
          >
            <el-input
              type="number"
              :precision="1"
              :step="1"
              :min="0"
              :max="100"
              :placeholder="$t('plus.input_discount_rate')"
              v-model="form.discount"
              class="max-w460"
            >
              <template #append> % </template>
            </el-input>
            <div class="tips">{{$t('plus.discount_range_note')}}</div>
          </el-form-item>
          <!--          <el-form-item label="折扣率 ">
            <el-input v-model="form.discount" placeholder="请输入折扣率" type="number"></el-input>
            <div class="tips">折扣率范围0-10，9.5代表9.5折，0代表不折扣</div>
          </el-form-item> -->
        </div>
        <el-form-item :label="$t('plus.max_discount_limit')" v-if="form.couponType == 20">
          <el-input
            v-model="form.bigPrice"
            :placeholder="$t('plus.input_amount')"
            type="number"
          ></el-input>
          <div class="tips">{{$t('plus.max_deduction_note')}}</div>
        </el-form-item>
        <el-form-item :label="$t('plus.min_spend_amount')"
          ><el-input
            v-model="form.minPrice"
            :placeholder="$t('plus.min_spend_input')"
            type="number"
          ></el-input
        ></el-form-item>

        <el-form-item :label="$t('plus.expiry_type')">
          <el-radio-group v-model="form.expireType">
            <el-radio label="10">{{$t('plus.effective_after_receive')}}</el-radio>
            <el-radio label="20">{{$t('plus.fixed_time')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="form.expireType == 10">
          <el-form-item :label="$t('plus.valid_days')"
            ><el-input
              v-model="form.expireDay"
              :placeholder="$t('plus.input_valid_days')"
              type="number"
            ></el-input
          ></el-form-item>
        </div>
        <div v-else>
          <el-form-item :label="$t('plus.valid_period1')">
            <el-date-picker
              v-model="form.activeTime"
              type="daterange"
              align="right"
              unlink-panels
              value-format="YYYY-MM-DD"
              :range-separator="$t('plus.to')"
              :start-placeholder="$t('plus.start_date')"
              :end-placeholder="$t('plus.end_date')"
              :picker-options="pickerOptions0"
            ></el-date-picker>
          </el-form-item>
        </div>
        <el-form-item
          :label="$t('plus.total_issued')"
          prop="totalNum"
          :rules="[{  required: true,  message: ' '}]"
        >
          <el-input
            v-model="form.totalNum"
            :placeholder="$t('plus.input_total_issued')"
            type="number"
          ></el-input>
          <div class="tips">{{$t('plus.limit_note')}}</div>
        </el-form-item>
        <el-form-item :label="$t('plus.show_in_center')">
          <el-radio-group v-model="form.showCenter">
            <el-radio :label="1">{{$t('plus.show')}}</el-radio>
            <el-radio :label="0">{{$t('plus.not_display')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('plus.usage_condition')">
          <el-radio-group v-model="form.freeLimit">
            <el-radio :label="0">{{$t('plus.no_limit')}}</el-radio>
            <el-radio :label="1">{{$t('plus.not_with_promo')}}</el-radio>
            <el-radio :label="2">{{$t('plus.not_with_level_discount')}}</el-radio>
            <el-radio :label="3">{{$t('plus.not_with_both')}}</el-radio>
          </el-radio-group>
          <div class="tips">{{$t('plus.promo_note')}}</div>
        </el-form-item>
        <el-form-item :label="$t('plus.sort')"
          ><el-input
            type="number"
            v-model="form.sort"
            :placeholder="$t('plus.input_sort_order')"
          ></el-input
        ></el-form-item>
      </template>
      <template v-if="activeName == '2'">
        <div class="common-form">{{$t('plus.applicable_products')}}</div>
        <el-form-item :label="$t('plus.select')">
          <el-radio-group v-model="form.applyRange">
            <el-radio :label="10">{{$t('plus.all_products')}}</el-radio>
            <el-radio :label="20"><span>{{$t('plus.specific_products')}}</span></el-radio>
            <el-radio :label="30"><span>{{$t('plus.specific_category')}}</span></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.applyRange == 20">
          <el-button class="mb10" @click="isProduct = true" type="primary" plain
            >{{$t('plus.add_product')}}</el-button
          >
          <el-table
            v-if="productList.length > 0"
            :data="productList"
            max-height="400"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="productId"
              label="ID"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="productName"
              :label="$t('plus.product_name')"
              width="180"
            ></el-table-column>
            <el-table-column prop="image" :label="$t('plus.image')">
              <template #default="scope">
                <img
                  v-img-url="hasImages(scope.row.imagePath)"
                  alt=""
                  :width="50"
                />
              </template>
            </el-table-column>
            <el-table-column :label="$t('plus.action')">
              <template #default="scope">
                <el-button
                  @click="deleteClick(scope.$index)"
                  type="text"
                  size="small"
                  >{{$t('plus.delete')}}</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="" v-if="form.applyRange == 30">
          <el-button
            class="mb10"
            @click="isCategory = true"
            type="primary"
            plain
            >{{$t('plus.add_category')}}</el-button
          >
          <div>
            <el-tag
              class="mr10 mb10"
              type="info"
              v-if="categoryList.first.length > 0"
              v-for="(item, index) in categoryList.first"
              :key="item.categoryId"
            >
              {{item.parent ? item.parent + "→" + item.name : item.name}}
            </el-tag>
            <el-tag
              class="mr10 mb10"
              type="info"
              v-if="categoryList.second.length > 0"
              v-for="(item, index) in categoryList.second"
              :key="item.categoryId"
            >
              {{item.parent ? item.parent + "→" + item.name : item.name}}
            </el-tag>
          </div>
        </el-form-item>
      </template>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button
          type="info"
          size="small"
          @click="cancelFunc"
          :loading="loading"
          >{{$t('plus.cancel_text')}}</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="onSubmit"
          :loading="loading"
          >{{$t('plus.submit')}}</el-button
        >
      </div>
    </el-form>
    <!--选择商品-->
    <Product
      :isProduct="isProduct"
      :excludeIds="excludeIds"
      :islist="true"
      @closeDialog="closeProductFunc"
    ></Product>
    <Category
      :isCategory="isCategory"
      :excludeIds="categoryIds"
      @close="closeCategoryFunc"
    ></Category>
  </div>
</template>

<script>
import CouponApi from "@/api/coupon.js";
import Product from "@/components/product/Product.vue";
import Category from "@/components/category/category.vue";
export default {
  components: {
    Product,
    Category
  },
  data() {
    return {
      activeName: "1",
      /*切换菜单*/
      activeIndex: "1",
      /*form表单数据*/
      form: {
        color: "10",
        couponType: "10",
        expireType: "10",
        sort: 1,
        activeTime: [],
        showCenter: 1,
        /*优惠限制0不显示1不可与促销同时2不可与等级优惠同时3不可于促销和等级同*/
        freeLimit: 0,
        applyRange: 10
      },
      loading: false,
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
        }
      },
      isCategory: false,
      isProduct: false,
      excludeIds: [],
      productList: [],
      categoryList: {
        first: [],
        second: []
      },
      categoryListFirst: [],
      categoryListSecond: [],
      categoryIds: []
    };
  },
  created() {},
  methods: {
    hasImages(e) {
      if (e) {
        return e;
      } else {
        return "";
      }
    },
    /*添加用户*/
    onSubmit() {
      let self = this;
      let form = self.form;
      form.productIds = self.excludeIds;
      form.categoryListFirst = self.categoryListFirst;
      form.categoryListSecond = self.categoryListSecond;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          CouponApi.addCoupon(form, true).then(data => {
            self.loading = false;
            ElMessage({
              message: $t("plus.add_success"),
              type: "success"
            });
            self.$router.push("/plus/coupon/index");
          }).catch(error => {
            self.loading = false;
          });
        }
      });
    },
    closeCategoryFunc(e) {
      let self = this;
      self.isCategory = false;
      if (e) {
        self.categoryList = e;
        self.categoryListFirst = [];
        e.first.forEach((item, index) => {
          self.categoryListFirst.push(item.categoryId);
        });
        self.categoryListSecond = [];
        e.second.forEach((item, index) => {
          self.categoryListSecond.push(item.categoryId);
        });
      }
    },
    /*关闭商品*/
    closeProductFunc(e) {
      let self = this;
      self.isProduct = e.openDialog;
      if (e.type == "success") {
        e.params.forEach((item, index) => {
          let params = {
            productId: item.productId,
            productName: item.productName,
            imagePath: item.image
          };
          self.excludeIds.push(params.productId);
          self.productList.push(params);
        });
      }
    },
    /*取消*/
    cancelFunc() {
      this.$router.push({
        path: "/plus/coupon/index"
      });
    },
    deleteClick(e) {
      this.excludeIds.splice(e, 1);
      this.productList.splice(e, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.mb10 {
  margin-bottom: 10px;
}

.product-add {
  padding-bottom: 50px;
}

.tips {
  color: #ccc;
}
</style>

